<template>
<div class='mall'>
    <div class="goodsList">
        <ul>
          <li v-for="(goods,index) in goodsList" v-if="goods.count">
              <p>{{goods.title}}</p>
              <p><i class="cubeic-remove" @click="subItem(index)"></i>{{goods.count}}<i class="cubeic-add" @click="addItem(index)"></i></p>
          </li>
        </ul>
    </div>
    <div class="checkout" >结算</div>
    <div class="cancelAll" @click="cancelAll">取消全部</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'
export default {
components: {},
data() {
return {
     
  };
  },
methods: {
  ...mapMutations([
    'cancelAll',
    'addItem',
    'subItem'
  ])

  },
  computed:{
      ...mapState([
        // map this.goodsList to store.state.goodsList
        'goodsList',
      ]
      )
  },
  mounted() {

  },
}
</script>
<style lang='stylus' scoped>
.goodsList{
  padding:10px;
      ul li{
        margin-top:15px;
        
        padding:0px 20px;
          display:flex;
          justify-content:space-between;
          align-items:center;
        }
}
.checkout{
  width:100%;
  height:50px;
  font-size:20px;
  background-color:#9b9b9bcc;
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.cancelAll{
  margin-top:10px;
  width:100%;
  height:50px;
  font-size:20px;
  background-color:#9b9b9bcc;
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>